<template>
	<view class="page">
		<view class="header1">
			<view class="ipt-box">
				<input confirm-type="search" v-model="searchIpt" type="text" value="" :placeholder="optionsDataText == '工商业抄表'?'请输入档案号':'请输入气表号'"
					placeholder-class="plac-class" />
				<image src="/static/search1.png" mode="" @click="searNum"></image>
			</view>
			<view class="header1-right">
				<view class="select">
					<view class="u-flex" @tap="showYear = true">
						<input style="color: #FFFFFF;" placeholder-style="color:#FFFFFF" class="ym" type="text" v-model="nowYear.showTime" disabled placeholder="请选择年月"/>
						<u-icon name="arrow-down-fill" color="#FFFFFF"></u-icon>
					</view>
					<u-picker mode="time" v-model="showYear" :params="params" @confirm="confirm"></u-picker>
				</view>
				<easySelect class="easySelect"
					style="width:240rpx;height:100%;color: #0000;font-size: 28rpx;color: #fff;" :options="optionsData"
					ref="easySelect" color="#FFFFFF" :value="optionsDataText" @selectOne="optionsDatas">
				</easySelect>
			</view>
		</view>
		<!-- 		<view class="danger-box">
			<view class="danger-item"  >
				<view class="safe">
					<image src="/static/aqy.png" mode=""></image>
					陈飞
				</view>
				<view>档案号：123456789</view>
				<view>身份证号：464327874827823827</view>
				<view>电话：16432875390</view>
				<view>地址：某村某镇某县</view>
				<text class="chaoshi_zhuantai">{{item.exceed_time == false ? '' : '已超时'}}</text>
				<image class="shenhe" :src="item.status_picture" mode=""></image>
			</view>
		</view> -->
		<view class="all">
			<view class="list-item" v-for="i,index in list" :key="index" @tap="jump(i.id,i.status)">
				<view class="list-item-content">
					<view class="items">
						<image class="portrait" src="../../static/aqy.png" mode=""></image>
						<text class="colorhui">{{i.user.realname}}</text>
					</view>
					<view class="items">
						<text>档案号：</text>
						<text class="colorhui">{{i.user.meter_num}}</text>
					</view>
					<view class="items">
						<text>身份证号：</text>
						<text class="colorhui">{{i.user.ID_num}}</text>
					</view>
					<view class="items">
						<text>电话：</text>
						<text class="colorhui">{{i.user.mobile}}</text>
					</view>
					<view class="items">
						<text>地址：</text>
						<text class="colorhui">{{i.user.address_text}}</text>
					</view>
					<view class="items">
						<text>时间：</text>
						<text class="colorhui"> {{$u.timeFormat(i.createtime, 'yyyy年mm月dd日')}}</text>
					</view>
					<view class="items" v-if="i.status=='0'">
						<text>拒接原因：</text>
						<text class="colorhui"> {{i.reason}}</text>
					</view>
				</view>
				<view class="list-item-status" v-if="i.status==0">
					<image class="status-img" src="../../static/pagesB/butongguo.png" mode=""></image>
				</view>
				<view class="list-item-status" v-if="i.status==1">
					<image class="status-img" src="../../static/pagesB/tongguo.png" mode=""></image>
				</view>
				<view class="list-item-status" v-if="i.status==2">
					<image class="status-img" src="../../static/pagesB/tijiao.png" mode=""></image>
				</view>
			</view>
		</view>
		<das-add @tap="skip(optionsDataText,i)"></das-add>
	</view>
</template>

<script>
	import easySelect from '@/components/easy-select/easy-select'
	export default {
		components: {
			easySelect
		},
		data() {
			return {
				list: [],
				optionsData: [{
						id: 2,
						label: '气表更换'
					},
					{
						id: 1,
						label: '气表清零'
					},
					{
						id: 3,
						label: '工商业抄表'
					}
				],
				optionsDataText: '气表更换',
				searchIpt: '',
				page: 1,
				yinhuan_id: 2,
				showYear:false,
				nowYear:{
					showTime:'', //前端展示的时间
					timeYear:'',  //传给后台的时间
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onLoad() {
		},
		onShow() {
			this.list = []
			if (this.optionsDataText == '气表更换') {
				this.initre()
			}
			if (this.optionsDataText == '气表清零') {
				this.initcl()
			}
			if (this.optionsDataText == '工商业抄表') {
				this.initch()
			}
		},
		onReachBottom() {
			this.page++
			if (this.optionsDataText == '气表更换') {
				this.initre()
			}
			if (this.optionsDataText == '气表清零') {
				this.initcl()
			}
			if (this.optionsDataText == '工商业抄表') {
				this.initch()
			}
		},

		methods: {
			confirm(e){
				this.nowYear.showTime = e.year+'年'+e.month+'月'
				this.nowYear.timeYear = e.year +'-'+e.month
				this.page = 1
				this.list = []
				if (this.optionsDataText == '气表更换') {
					this.initre()
				}
				if (this.optionsDataText == '气表清零') {
					this.initcl()
				}
				if (this.optionsDataText == '工商业抄表') {
					this.initch()
				}
			},
			searNum() {
				if (this.searchIpt) {
					this.list = []
					if (this.optionsDataText == '气表更换') {
						this.initre()
					}
					if (this.optionsDataText == '气表清零') {
						this.initcl()
					}
					if (this.optionsDataText == '工商业抄表') {
						this.initch()
					}
				}
			},
			renewal() {
				uni.navigateTo({
					url: 'renewal'
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			jump(id,status) {
				if (this.yinhuan_id == 2) {
					this.$navTo('/pagesB/gasMeter/renewal?id=' + id+'&status='+status)
				}
				if (this.yinhuan_id == 1) {
					this.$navTo('/pagesB/gasMeter/clear?id=' + id)
				}
				if (this.yinhuan_id == 3) {
					this.$navTo('/pagesB/gasMeter/check?id=' + id)
				}
			},
			optionsDatas(option) {
				let that = this
				that.selecValue = '请选择'
				that.selecValue1 = '请选择'
				that.optionsDataText = option.label
				that.yinhuan_id = option.id
				console.log('气表id', that.yinhuan_id)
				that.list = []
				that.page = 1
				if (that.optionsDataText == '气表更换') {
					that.initre()
					// that.skip()
					// this.navigateTo('renewal')
				}
				if (that.optionsDataText == '气表清零') {
					// this.navigateTo('clear')
					that.initcl()
					// that.options1 = []

				}
				if (that.optionsDataText == '工商业抄表') {
					// this.navigateTo('check')
					that.initch()
				}
			},
			skip(option, url) {
				if (option == '请选择') {
					return this.$showToast('请选择要添加的模块')
				}
				if (option == "气表更换") {
					this.navigateTo('renewal')
				}
				if (option == "气表清零") {
					this.navigateTo('clear')
				}
				if (option == "工商业抄表") {
					this.navigateTo('check')
				}
			},
			initre() {
				let _this = this
				uni.request({
					url: this.$url + 'gas.change_gas_record/getAllList',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						page: _this.page,
						no: _this.searchIpt,
						choose_time:_this.nowYear.timeYear
					},
					success: res => {
						if (res.data.code == 1) {
							_this.list = _this.list.concat(res.data.data)
							_this.searchIpt = ''
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			initcl() {
				let _this = this
				uni.request({
					url: this.$url + 'gas.clear_gas_record/getAllList',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						page: _this.page,
						no: _this.searchIpt,
						choose_time:_this.nowYear.timeYear
					},
					success: res => {
						if (res.data.code == 1) {
							_this.list = _this.list.concat(res.data.data)
							_this.searchIpt = ''
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			initch() {
				let _this = this
				uni.request({
					url: this.$url + 'gas.copy_gas_record/getAllList',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						page: _this.page,
						no: _this.searchIpt,
						choose_time:_this.nowYear.timeYear
					},
					success: res => {
						if (res.data.code == 1) {
							_this.list = _this.list.concat(res.data.data)
							_this.searchIpt = ''
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.select{
		background: #003690;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.ym{
			min-width: 120rpx;
			max-width: 170rpx;
		}
	}
	.page {
		background: #F1F1F1;

		.header1 {
			width: 100%;
			background-color: #003690;
			padding: 10rpx 30rpx 0;

			.ipt-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				flex: 1;
				height: 52rpx;
				background-color: #fff;
				border-radius: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.header1-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #E2ECFB;
				flex: 1;
				justify-content: center;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		// 列表
		.all {
			padding: 22rpx 32rpx 0;
			min-height: 100vh;
			background: #F1F1F1;
		}

		.list-item {
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 6rpx rgba(0, 30, 57, 0.1);
			border-radius: 16rpx;
			display: flex;
			padding: 0rpx 20rpx;
			margin-bottom: 22rpx;
			align-items: center;
			justify-content: space-between;

			.list-item-content {
				width: 452rpx;

				.items {
					display: flex;
					align-items: center;
					padding: 5rpx 0;

					.portrait {
						width: 36rpx;
						height: 36rpx;
					}

					.colorhui {
						color: #999999;
					}
				}
			}

			.list-item-status {
				width: 171rpx;
				height: 174rpx;

				.status-img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}


		// .danger-item{
		// 	position: relative;
		// 	box-sizing: border-box;
		// 	width: 690rpx;
		// 	padding: 30rpx;
		// 	background-color: #fff;
		// 	border-radius: 10rpx;
		// 	margin: 30rpx auto 0;
		// 	box-shadow:0px 3px 4px rgba(0,30,57,0.15);
		// 	.safe{
		// 		color: #003690;
		// 		font-size: 28rpx;
		// 		line-height: 38rpx;
		// 		image{
		// 			width: 36rpx;
		// 			height: 36rpx;
		// 			margin-right: 6rpx;
		// 			vertical-align: bottom;
		// 		}
		// 	}
		// 	.kong{
		// 		display: inline-block;
		// 		width: 56rpx;
		// 	}
		// 	.kong1{
		// 		display: inline-block;
		// 		width: 14rpx;
		// 	}
		// 	.chaoshi_zhuantai{
		// 		position: absolute;
		// 		top: 20rpx;
		// 		right: 20rpx;
		// 		color: red;
		// 		font-size: 28rpx;
		// 		line-height: 38rpx;
		// 	}
		// 	.shenhe{
		// 		position: absolute;
		// 		top: 100rpx;
		// 		right: 20rpx;
		// 		width: 170rpx;
		// 		height: 170rpx;
		// 	}
		// }

	}
</style>
